<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>销售日报表</title>

		<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
		<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css" />
		<link rel="stylesheet" href="../assets/css/ui.jqgrid.min.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />

		<script src="../assets/js/ace-extra.min.js"></script>
	</head>

	<body class="no-skin">
		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try {
					ace.settings.loadState('main-container')
				} catch(e) {}
			</script>
			<table id="tab" style = "margin-top:-1px;" >
			<tr>
				<td>&nbsp;&nbsp;<i class="ace-icon fa  blue">应用分类：</i></td>
				<td><select id="Meta_App" onchange = "AppOnclick()">
				</select>
				</td>
				<td>&nbsp;&nbsp;&nbsp;<i class="ace-icon fa blue">销售门店：</i></td>
				<td><select id="Meta_Store" onchange = "StoreOnclick()">
				</select>
				</td>
				<td>&nbsp;&nbsp;&nbsp;<i class="ace-icon fa blue">支付时间：</i></td>
				<td><input id="starttimeInput" type="date" name="time"  onchange = "TimeOnclick()"></td>
				<td><i class="ace-icon fa black">至</i></td>
       			<td><input id="endtimeInput" type="date" name="time" onchange = "TimeOnclick()" > </td>
       			<td>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-sm btn-primary" onClick="OutExcel()">导出EXCEL</button></td>
				<!--<td>&nbsp;&nbsp;<input class="btn btn-sm btn-primary" type="button" value="查询" onclick="getJqguid()"></td>-->
			</tr>
		    </table>
								
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">
						<div class="row" >
							<div class="col-xs-12" style="padding:3px 3px";>
								<table id="grid-table"></table>
								<table id="grid-total">
			                        <tr>
										<td>&nbsp;&nbsp;<i class="ace-icon fa  blue">总计：</i></td>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;<i class="ace-icon fa  blue">销售数量</i></td>
										<td>&nbsp;<input id="Meta_number" type="text" readonly="readonly"></input></td>
										<td>&nbsp;&nbsp;<i class="ace-icon fa blue">商品金额</i></td>
										<td>&nbsp;<input id="Meta_total"  type="text" readonly="readonly"></input></td>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;<i class="ace-icon fa  blue">优惠金额</i></td>
										<td>&nbsp;<input id="Meta_discount_Fee" type="text" readonly="readonly"></input></td>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;<i class="ace-icon fa  blue">付款金额</i></td>
										<td>&nbsp;<input id="Meta_final_Fee" type="text" readonly="readonly"></input></td>
									</tr>
								</table>
								<div id="grid-pager"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--<div class="footer">
				<div class="footer-inner">
					<div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">财货通</span> 报表管理中心; 2018-2019
						</span>

					</div>
				</div>
			</div>-->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div>
		<script src="../assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
		</script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/bootstrap-datepicker.min.js"></script>
		<script src="../assets/js/jquery.jqGrid.min.js"></script>
		<script src="../assets/js/grid.locale-en.js"></script>
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/a-my-common.js"></script>
	
		<script type="text/javascript">
				
			$(function(){
				getChooseAPP();
				getChooseStore();
				getJqguid();
				getAmount();
			})
			
			var cht_appsId = "";
			var Meta_storeNo = "";
			var startTime = "";
			var endTime = "";
			var cht_order="ChtOrder";
			function AppOnclick(){
				cht_appsId = $('#Meta_App').val();
				getChooseStore();
				getJqguid();
			}
			function StoreOnclick(){
				Meta_storeNo = $('#Meta_Store').val();
				getJqguid();
			}
			function TimeOnclick(){
			 	 startTime = $('#starttimeInput').val()+' 00:00:00'; //获取值
			 	 endTime = $('#endtimeInput').val()+' 23:59:59'; //获取值
			 	 getJqguid();
		    }
			
			function OutExcel(){
				window.location=URL_TABLES+'/bapi?operFlag=getReport&metaStoreNo='+Meta_storeNo
				+"&chtAppsId="+ cht_appsId+"&startStr="+ startTime+"&endStr="+endTime+"&Mate_TablesName="+cht_order;
			}
			
			//加载应用分类信息
			function getChooseAPP(){
	    	 var data = {
	    			 operFlag:"chooseAPP"
	    	 }
	    	 var rtAry = myPost(URL_TABLES+"/rapi",data);
					var str = "";
					var main = "<option value =''>全部分类</option>";
					for(var i=0;i<rtAry.length;i++){
					  str +='<option value = '+rtAry[i].cht_appsId+'>'+rtAry[i].Meta_name+'</option>';
					}
					//把拼接好的str放到select标签里
					Meta_App.innerHTML =main+str;
			}
		
			//加载店铺信息
		 	function getChooseStore(){
			 var data = {
	    			 operFlag:"chooseStore",
	    			 cht_appsId:cht_appsId
	    			 
	    	 }
	    	 var rtAry = myPost(URL_TABLES+"/rapi",data);
					var str = "";
					var main = "<option value =''>全部店铺</option>";
					for(var i=0;i<rtAry.length;i++){
					  str +='<option value = '+rtAry[i].Meta_storeNo+'>'+rtAry[i].Meta_name+'</option>';
					}
					//把拼接好的str放到select标签里
					Meta_Store.innerHTML = main+str;
			}
			
			function myPost(url,data){
        	var recordAry = null;
		        $.ajax({
		            type:'post',
		            url:url,
		            data:data,
		            dataType:'json',
		            async:false,
		            success:function(returnValue){
		                recordAry = returnValue;
		            },
		            error:function(XMLHttpRequest, textStatus, errorThrown){
		                var errorInfo = "status:"+XMLHttpRequest.status;
		                errorInfo+= ",readyState:"+XMLHttpRequest.readyState;
		                console.log("槽糕!请求服务器端发生异常{post>error![errorInfo="+errorInfo+"]}");
		            }
		        });
		        return recordAry;
		    }
		
			function getAmount(){
	    	 var rt = myPost(URL_TABLES+'/rapi?operFlag=queryReportAmount&Mate_TablesName='+cht_order);
	    	 		var rtAry = rt.root;
					var numberAmount = "";
					var totalAmount = "";
					var discountAmount = "";
					var finalAmount = "";
					for(var i=0;i<rtAry.length;i++){
					  numberAmount=rtAry[i].number_Amount;
					  totalAmount=rtAry[i].total_Amount;
					  discountAmount=rtAry[i].discount_Fee_Amount;
					  finalAmount=rtAry[i].final_Fee_Amount;
					}
					Meta_number.value=numberAmount;
					Meta_total.value=totalAmount;
					Meta_discount_Fee.value=discountAmount;
					Meta_final_Fee.value=finalAmount;
		    }
		function getJqguid(){
			jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";					
				var parent_column = $(grid_selector).closest('[class*="col-"]');
				//resize to fit page size
				$(window).on('resize.jqGrid', function() {
					$(grid_selector).jqGrid('setGridWidth', parent_column.width());
				})

				//resize on sidebar collapse/expand
				$(document).on('settings.ace.jqGrid', function(ev, event_name, collapsed) {
					if(event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
						//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
						setTimeout(function() {
							$(grid_selector).jqGrid('setGridWidth', parent_column.width());
						}, 20);
					}
				})
//				jQuery(grid_selector).trigger("reloadGrid");
				jQuery(grid_selector).setGridParam( //G,P要大写
				{
					url:URL_TABLES+'/rapi?operFlag=queryReport&metaStoreNo='+Meta_storeNo+"&cht_appsId="+ cht_appsId
					+"&startStr="+ startTime+"&endStr="+endTime+"&Mate_TablesName="+cht_order,
					postData:{"Meta_storeNo":Meta_storeNo},
					postData:{"startStr":startTime},
					postData:{"endStr":endTime},
					
				}
				) .trigger("reloadGrid");
				jQuery(grid_selector).jqGrid({
					url:URL_TABLES+'/rapi?operFlag=queryReport&metaStoreNo='+Meta_storeNo
					+"&cht_appsId="+ cht_appsId+"&startStr="+ startTime+"&endStr="+endTime+"&Mate_TablesName="+cht_order,
					datatype: "json",
					pager : pager_selector,  
					pgtext : "Page {0} of {1}",
					height: 360,
					colNames: ['销售门店','销售日期','销售数量','商品金额', '优惠金额','付款金额'],
					colModel:[
						{name:'META_NAME',index:'META_NAME', width:110},
						{name:'DATE',index:'DATE', width:100, 
							width : 100,
                      		search:true, 
                      		editable:false,
                          	stype: 'text', 
                          	sopt: ['eq'],
						 	formatter: 'date',
							formatoptions: {
							 	srcformat: 'Y-m-d ',
							 	newformat: 'Y-m-d '
							}	
					    },
						{name:'Meta_number',index:'Meta_number',width:100},
						{name:'Meta_total',index:'Meta_total', width:100},
						{name:'Meta_discount_Fee',index:'Meta_discount_Fee', width:100, editable: false,edittype:false},
						{name:'Meta_final_Fee',index:'Meta_final_Fee', width:100, editable: false,edittype:"select"}
					], 
					
					 jsonReader: {    //jsonReader来跟服务器端返回的数据做对应  
					 	root: "root", //包含实际数据的数组  
			            page: "page",  //当前页  
			            totalPage: "totalPage",//总页数  
			            totalRecords:"totalRecord", //查询出的记录数  
			            repeatitems : false      
			        	},

					viewrecords: true,
					rowNum: 10,
					rowList: [10, 20, 30],
					pager: pager_selector,
					altRows: true,
					recordtext: " 显示第 {0}条 - {1} 条纪录，  共 {2} 条",
	    			emptyrecords: "当前没有对应记录信息",
					loadtext: "加载中...",
					pgtext : " 第{0}页 ，共 {1} 页",
//					rownumbers: true,//如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增
//					autoScroll: true,//开启水平滚动条
//					shrinkToFit:false,
					multiselect: true,//定义是否可以多选
					multiboxonly: true,
//					gridComplete:function(){
            		//显示grid底部滚动条
//      			   $(grid_selector).closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
//      			},
					// 数据加载完成后 添加 采购按钮 
					loadComplete: function() {
						var table = this;
						setTimeout(function() {
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},

					editurl: "./dummy.php", //nothing is saved
					caption: ""

				});
				$(window).triggerHandler('resize.jqGrid'); //trigger window resize to make the grid get the correct size

//				enable search/filter toolbar

//				switch element when editing inline
				function aceSwitch(cellvalue, options, cell) {
					setTimeout(function() {
						$(cell).find('input[type=checkbox]')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
					}, 0);
				}
				//enable datepicker
				function pickDate(cellvalue, options, cell) {
					setTimeout(function() {
						$(cell).find('input[type=text]')
							.datepicker({
								format: 'yyyy-mm-dd',
								autoclose: true
							});
					}, 0);
				}


				//navButtons
				jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
					edit: false,
					editicon: 'ace-icon fa fa-pencil blue',
					add: false,
					addicon: 'ace-icon fa fa-plus-circle purple',
					del: false,
					delicon: 'ace-icon fa fa-trash-o red',
					search: true,
					searchicon: 'ace-icon fa fa-search orange',
					refresh: true,
					refreshicon: 'ace-icon fa fa-refresh green',
					view: true,
					viewicon: 'ace-icon fa fa-search-plus grey',
				}, {
					//edit record form
					//closeAfterEdit: true,
					//width: 700,
					recreateForm: true,
					beforeShowForm: function(e) {
						var form = $(e[0]);
						form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
						style_edit_form(form);
					}
				}, {
					//new record form
					//width: 700,
					closeAfterAdd: true,
					recreateForm: true,
					viewPagerButtons: false,
					beforeShowForm: function(e) {
						var form = $(e[0]);
						form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
							.wrapInner('<div class="widget-header" />')
						style_edit_form(form);
					}
				}, {
					//delete record form
					recreateForm: true,
					beforeShowForm: function(e) {
						var form = $(e[0]);
						if(form.data('styled')) return false;

						form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
						style_delete_form(form);

						form.data('styled', true);
					},
					onClick: function(e) {
						//alert(1);
					}
				}, {
					//search form
					recreateForm: true,
					afterShowSearch: function(e) {
						var form = $(e[0]);
						form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						style_search_form(form);
					},
					afterRedraw: function() {
						style_search_filters($(this));
					},
					multipleSearch: true,
					/**
					multipleGroup:true,
					showQuery: true
					*/
				}, {
					//view record form
					recreateForm: true,
					beforeShowForm: function(e) {
						var form = $(e[0]);
						form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
					}
				})

				function style_edit_form(form) {
					//enable datepicker on "sdate" field and switches for "stock" field
					form.find('input[name=sdate]').datepicker({
						format: 'yyyy-mm-dd',
						autoclose: true
					})

					form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
					//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
					//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

					//update buttons classes
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide(); //ui-icon, s-icon
					buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
					buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

					buttons = form.next().find('.navButton a');
					buttons.find('.ui-icon').hide();
					buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
					buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
				}

				function style_delete_form(form) {
					var buttons = form.next().find('.EditButton .fm-button');
					buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide(); //ui-icon, s-icon
					buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
					buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
				}

				function style_search_filters(form) {
					form.find('.delete-rule').val('X');
					form.find('.add-rule').addClass('btn btn-xs btn-primary');
					form.find('.add-group').addClass('btn btn-xs btn-success');
					form.find('.delete-group').addClass('btn btn-xs btn-danger');
				}

				function style_search_form(form) {
					var dialog = form.closest('.ui-jqdialog');
					var buttons = dialog.find('.EditTable')
					buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
					buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
					buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
				}

				function beforeDeleteCallback(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;

					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);

					form.data('styled', true);
				}

				function beforeEditCallback(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}

				//or go back to default browser checkbox styles for the grid
				function styleCheckbox(table) {
					
				}

				//you can change them like this in here if you want
				function updateActionIcons(table) {
					
						
				}

				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = {
						'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
						'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
						'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
						'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

						if($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
					})
				}

				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({
						container: 'body'
					});
					$(table).find('.ui-pg-div').tooltip({
						container: 'body'
					});
				}

				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

				$(document).one('ajaxloadstart.page', function(e) {
					$.jgrid.gridDestroy(grid_selector);
					$('.ui-jqdialog').remove();
				});
			});
		}
		</script>
	</body>

</html>